<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>产品详情</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Cache-Control" content="no-transform">
		<meta name="format-detection" content="telephone=no">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="style/css/basic.css" />
		<link rel="stylesheet" href="style/plugin/animate/css/animate.min.css" />
		<link rel="stylesheet" href="style/plugin/layui/css/layui.css" />
		<link rel="stylesheet" href="style/css/product_details.css" />
		<link rel="stylesheet" href="style/css/details.css" />
		<script type="text/javascript" src="style/plugin/mui/js/mui.min.js"></script>
		<script type="text/javascript" src="style/js/jquery-2.1.4.min.js"></script>
		<script type="text/javascript" src="style/plugin/layui/layui.js"></script>
		<script type="text/javascript" src="style/mockjs/dist/mock.js"></script>
		<script type="text/javascript" src="style/js/vue.min.js"></script>
		<script type="text/javascript" src="style/js/vue-resource.js"></script>
		<script type="text/javascript" src="style/js/basic.js"></script>
		<style>
			.cartMak{
				display:block;
				width:5px;
				height:5px;
				background:red;
				position:absolute;
				top:5px;
				right:49px;
				border-radius:50%;
			}
			.orderemark span,.orderemark input{
				vertical-align: middle;
				line-height:30px;
				margin:5px 5px 5px 0;
			}
		</style>
	</head>

	<body>
		<div id="product_detail">
			<div id="header">
				<h1>产品详情</h1>
				<span class="backicon"></span>
			</div>
			<div class="body">
				<div class="product_img">
					<img :src="htp+goodsInfo.thumb_pic" v-if="goodsInfo!=''">
				</div>
				<div class="product_info">
					<span class="title">产品名称：{{goodsInfo.title}}</span>
					<span class="score">价格：￥<strong>{{goodsInfo.price}}</strong></span>
					<span>库存：<em>{{goodsInfo.stock}}{{goodsInfo.unit}}</em></span>
					<div class="sku_num clearfix">
						<em>数量：</em>
						<div class="num_wrap">
							<span class="minus" @tap="reduce"></span>  
							<input class="num" type="tel" v-model="num" readonly="readonly"/>
							<span class="plus" @tap="plus"></span>
						</div>
					</div>
	                <!--<div class="orderemark">
	                	<span class="fl">订单备注：</span>
						<input type="text" name="text" placeholder="线下邮寄请备注地址" v-model="addr"/>
	                </div>-->
				</div>
				<div class="details">
					<div class="tab clearfix">
	
						<ul class="list clearfix">
							<li :class="{'active':flag==1}" @tap="goodsIntro"><span>商品介绍</span></li>
							<li :class="{'active':flag==2}" @tap="goodsParame"><span>规格参数</span></li>
							<li :class="{'active':flag==3}" @tap="goodsAftersale"><span>售后保障</span></li>
						</ul>
	
						<div class="details_content">
							<div v-show="flag==1" v-html="goodsInfo.intro">
								
							</div>
							<div class="detail_item" v-show="flag==2">
								<div class="mod_tit_line">
									<h3>商品参数</h3>
								</div>
								<div>
									<table cellpadding="0" cellspacing="1" width="100%" border="0" class="Ptable param_table">
										<tr>
											<td>商品编号</td>
											<td>{{goodsInfo.good_no}}</td>
										</tr>
										<tbody>
											<tr>
												<th class="tdTitle" colspan="2">规格参数</th>
											</tr>
											<tr>
											</tr>
											<tr>
												<td class="tdTitle">容量</td>
												<td>{{goodsInfo.capacity}}</td>
											</tr>
											<tr>
												<td class="tdTitle">产品重量（kg）</td>
												<td>{{goodsInfo.weight}}</td>
											</tr>
											<tr>
												<td class="tdTitle">包装</td>
												<td>{{goodsInfo.package}}</td>
											</tr>
											<tr>
												<th class="tdTitle" colspan="2">主体</th>
											</tr>
											<tr>
											</tr>
											<tr>
												<td class="tdTitle">存储方法</td>
												<td>{{goodsInfo.storage_method}}</td>
											</tr>
											<tr>
												<td class="tdTitle">酒精度</td>
												<td>{{goodsInfo.degree}}</td>
											</tr>
											<tr>
												<td class="tdTitle">香型</td>
												<td>{{goodsInfo.typesof}}</td>
											</tr>
											<tr>
												<td class="tdTitle">省份</td>
												<td>{{goodsInfo.typesof}}</td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
							<div class="detail_item" v-show="flag==3">								
								<div class="mod_tit_line">
									<h3>权利声明</h3>
								</div>
								<p v-html="goodsInfo.service" class="pd">
								</p>
								
							</div>
						</div>
					</div>
	
				</div>

			</div>
			<div class="exchange maxwidth">
				<a href="javascript:;" class="shopping_cart" @tap="jumpCartList">
					购物车
					<span class="cartMak" v-if="carFlag==1"></span> 
				</a>
	
				<a href="javascript:;" class="add_cart"  @tap="addCar">加入购物车</a>
				<a href="javascript:;" class="exchange_btn" @tap="jumpPayment">立即购买</a>
			</div>
		</div>
	</body>
	<script>
    new Vue({
    	el:"#product_detail",
    	data:{
    		goodsInfo:"",
    		num:1,
    		flag:1,
    		recv:"",
    		carFlag:0,
    		addr:"",
    		htp:"",
    		ticket:"",
		    sign:""
    	},
    	methods:{
    		goodsIntro:function(){
    			this.flag=1
    		},
    		goodsParame:function(){
    			this.flag=2
    		},
    		goodsAftersale:function(){
    			this.flag=3
    		},
    		reduce:function(){
    			this.num--;
    			if(this.num<=1){
    				this.num=1
    			}
    		},
    		plus:function(){ 
    			this.num++;
    			if(this.num>=this.goodsInfo.instock){
    				this.num=this.goodsInfo.instock 
    			}
    		},
    		addCar:function(){
    			//请求添加购物车 
    			this.$http.post(domain+"/cart/create?t="+this.ticket+"&sign="+this.sign,{good_no:this.recv,num:1,type:1},{emulateJSON:true}).then( 
		            function (res) {
		                // 处理成功的结果
		                if(res.body.code==1){
//		                  console.log(res.body)	
		                  this.carFlag=1
		                  mui.toast("添加成功")
		                }else{
		                	mui.toast(res.body.msg)
		                }
		            },function (res) {
		            // 处理失败的结果
		            console.log(res) 
		            }
		        );
    		},
    		jumpCartList:function(){
    			this.carFlag=0
    			openurl("cart_list")
    		}, 
    		jumpPayment:function(){ 
    			var arr=[];
    			var obj={};
    			var arr2=[];
    			var obj2={};
    			obj.good_no=this.recv;
    			obj.num=this.num
    			obj2.title=this.goodsInfo.title
    			obj2.price=this.goodsInfo.price
    			obj2.img=this.htp+this.goodsInfo.thumb_pic
    			obj2.num=this.num
    			arr.push(obj)
    			arr2.push(obj2)
    			arr= JSON.stringify(arr)
    			arr2=JSON.stringify(arr2)
    			localStorage.setItem("canshu",arr)
    			localStorage.setItem("goodmsg",arr2) 
    			openurl_can("settle",0)
    		}   
    	},
    	created:function(){
    		this.carFlag=localStorage.getItem("cart")  
    		var that=this
    		that.ticket=localStorage.getItem("tick")
            that.sign=localStorage.getItem("sig")
    		mui.plusReady(function(){
    			that.recv=plus.webview.currentWebview().goodsId;//获取页面传值参数
    			//获取商品详情
    			that.$http.post(domain+"/good/getInfo?t="+that.ticket+"&sign="+that.sign,{
    				good_no:that.recv
    			},{emulateJSON:true}).then( 
		            function (res) {
		                // 处理成功的结果
		                if(res.body.code==1){
		                  console.log(res.body)	
		                  that.goodsInfo=res.body.data;
		                } 
		            },function (res) {
		            // 处理失败的结果
		            console.log(res) 
		            }
		        );
    		}) 
    	},
    	mounted:function(){
    		this.htp=domain2
    	}
    })
	</script>

</html>